<template>
  <div>
    <crumb />
    <div class="course-study">
      <div class="left-list">
        <div class="left-top">
           <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span>共30人</span>
        </div>
        <div class="left-middle">
          <span>英语视听说</span>
          <p>班级：{{this.data.className}}   <span>学生：{{this.data.studentNum}}人</span></p>
        </div>
        <div class="left-bottom">
          <p>Jack的五维指标学习分析图如下：</p>
          <div id="myChart"></div>
        </div>
        <div class="left-bots">
          <el-table :data="tableData" style="width: 100%" border>
            <el-table-column prop="date" label="学习指标" width="180" align="center"></el-table-column>
            <el-table-column prop="duration" label="指标数值" width="180" align="center"></el-table-column>
            <el-table-column prop="durationRank" label="排名" align="center"></el-table-column>
          </el-table>
        </div>
      </div>
       <div class="right-list">
         <div class="right-top">
           <div>时间：19''32</div>
           <div>排名：12名</div>
           <div>班级平均：35972</div>
         </div>
         <div class="right-middle">
           <div id="myChart-two"></div>
         </div>
          <div class="right-bottom">
           <el-button type="info" style="width: 100%">切换饼图</el-button>
         </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAnalyse } from '@/api/student/analyse/index'

import echarts from 'echarts'
// 引入柱状图组件
require('echarts/lib/chart/bar')
// 引入提示框和title组件
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')

export default {
  data () {
    return {
      list: [],
      treeProps: {
        children: 'childrens',
        label: 'chapterName'
      },
      value: '',
      options: [],
      tableData: [
        {
          date: '学习时长',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }
      ],
      data: {}
    }
  },
  methods: {
    drawLine () {
      let myChart = echarts.init(document.getElementById('myChart'))
      myChart.setOption({
        tooltip: {},
        radar: {
          name: {
            textStyle: {
              color: '#fff',
              backgroundColor: '#999',
              borderRadius: 3,
              padding: [3, 5]
            }
          },
          indicator: [
            { name: '学习时长', max: this.list.durationRate },
            { name: '学习态度', max: this.list.mannerRate },
            { name: '学习数量', max: this.list.numRate },
            { name: '学习进度', max: this.list.rateRate },
            { name: '学习质量', max: this.list.durationRate }
          ]
        },
        series: [{
          name: '头条号指数',
          type: 'radar',
          data: [
            {
              value: [ 4300, 10000, 28000, 35000, 50000, 19000 ],
              name: '头条号指数'
            }
          ]
        }]
      })
    },
    drawLineTwo () {
      let myChart = echarts.init(document.getElementById('myChart-two'))
      myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'value',
          boundaryGap: [0, 0.01]
        },
        yAxis: {
          type: 'category',
          data: ['课程学习', '课程任务', '考试测评', '实践技能', '听力训练', '口语测评', '案例分析', '互动实训', '综合案例']
        },
        series: [
          {
            name: '',
            type: 'bar',
            data: [18203, 23489, 29034, 104970, 131744, 630230, 15615, 15616, 88863, 65262]
          }
        ]
      })
    },
    async getAnalyse () {
      const res = await getAnalyse()
      this.list = res.data.stuStudyAnalysis
      this.data = res.data
    }
  },
  components: {},
  mounted () {
    this.drawLine()
    this.drawLineTwo()
    this.getAnalyse()
    console.log(this.$route.params.id)
  }
}
</script>

<style scoped lang="scss">
 .course-study {
    height: 937px;
    width: 1200px;
    margin: 0 auto;
    display: flex;
    .left-list {
      width: 45%;
      height: 100%;
      // background: rgb(230, 228, 228);
      .left-top {
        box-sizing:border-box;
        padding: 20px;
        background: rgb(230, 228, 228);
        border-radius: 5px;
        overflow: hidden;
        .el-select {
          float: left;
        }
        span {
          float: right;
          margin-top: 10px;
          color: #666;
        }
      }
      .left-middle {
        box-sizing:border-box;
        padding:20px 20px 20px 20px;
        background: #e6e4e4;
        margin-top: 20px;
        span {
          font-weight: bold;
        }
        p {
          font-weight: 500;
          margin-top: 20px;
          color: #999;
          span {
            font-weight: 500;
            margin-left: 40px;
          }
        }
      }
      .left-bottom {
        width: 100%;
        height: 350px;
        background: #fff;
        margin: 0 auto;
        padding: 20px;
        border-radius: 5px;
      }
    }
    .right-list {
      width: 45%;
      height: 100%;
      margin-left: 20px;
      color: #666;
      .right-top {
        box-sizing:border-box;
        padding: 32px 20px;
        background: rgb(230, 228, 228);
        border-radius: 5px;
        overflow: hidden;
        display: flex;
        justify-content: space-around;
      }
    }
    #myChart {
      width: 95%;
      height: 300px;
    }
    #myChart-two {
      width: 95%;
      height: 515px;
    }
  }
</style>
